<template>
  <el-dialog
    :title="dialogItem.name || '提示'"
    v-model="dialogVisible"
    width="30%"
    :before-close="handleClose"
    :fullscreen="true"
  >
    <!-- <span>这是一段信息</span> -->
    <!-- <div ref="myChart"></div> -->
    <div ref="myChart" class="myChart-item" :id="dialogItem.otype"></div>
    <template #footer>
      <!-- <span class="dialog-footer">
        <el-button @click="cancelBack">Cancel</el-button>
        <el-button type="primary" @click="cancelBack"
          >Confirm</el-button
        >
      </span> -->
    </template>
  </el-dialog>
</template>

<script setup>
import {
  defineProps,
  watch,
  ref,
  defineEmits,
  reactive,
  nextTick,
  onMounted,
} from "vue";
import echartsItemDataHook from "@/hook/echartsItemDataHook.js";
import * as echarts from "echarts";

let dialogVisible = ref(false);
let dialogItem = reactive({});

let myChart = ref(null);
let myChartbox;

const emits = defineEmits(["update:visible"]); // 此处需写'update'
let props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  echartsItems: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

watch(
  () => props.visible,
  (nev) => {
    dialogVisible.value = nev;
    Object.assign(dialogItem, props.echartsItems);
    setOptions(props.echartsItems);
  }
);

function cancelBack() {
  // dialogVisible.value = false
  emits("update:visible", false);
}

function handleClose(nev) {
  // console.log(nev, ">>>>>>>");
  emits("update:visible", false);
}
function setOptions(option) {
  // console.log(option, ">>>>>>>>>>", myChart);
  // setTimeout()
  // 需要使用异步进行操作
  // 1.页面元素加载出来 2.延时触发及 异步任务
  setTimeout(() => {
    myChartbox = echarts.init(myChart.value);
    // 绘制图表
    myChartbox.setOption(
      echartsItemDataHook(
        option,
        (res, type) => {
          console.log(res, ">>>>");
          // 向父组件 传递 相应事件
          // emit("change", res, type);
        },
        {
          toolbox: {
            show: true,
            right: "4%",
            feature: {
              saveAsImage: { title: "保存为图片" },
            },
          },
        }
      )
    );
  }, 100);
}
</script>

<style scoped>
.myChart-item {
  height: 80vh;
}
</style>
